<template>
  <!-- 通信太多，不适合写成组件 -->
  <Title title="购物车"> </Title>
  <div class="cart">
    <div class="left">
      <el-card
        class="box-card"
        shadow="hover"
        v-for="(l, i) in cartList"
        :key="i"
      >
        <template #header>
          <div class="card-header">
            {{ l.good.name }}
          </div>
        </template>

        <div class="content">
          <el-checkbox
            v-model="l.checked"
            @change="changeflag(l)"
            label="选中"
            size="large"
          />
          <div class="center">
            <p>
              数量 ：
              <el-input-number
                v-model="l.value"
                @change="changevalue(l)"
                :precision="0"
                :min="1"
              />
            </p>
            <p>类型 ： {{ l.good.type.text }}</p>
            <p>原价 ： ￥{{ l.good.price }}</p>
            <p>折扣 ： {{ l.good.discount }} 折</p>
            <p>
              折扣价 ：￥{{
                ((l.good.price * l.good.discount) / 10).toFixed(1)
              }}
            </p>
          </div>
          <img :src="l.good.img" alt="" />
          <el-button type="danger" @click="cartdelete(l, i)">删除</el-button>
        </div>
      </el-card>
    </div>
    <el-card class="right" shadow="hover">
      <p>
        <el-checkbox v-model="quan" label="全选" size="large" />
      </p>
      <p>合计{{ allcount }}件</p>
      <p>合计{{ allprice.toFixed(1) }}元</p>
      <p><el-button @click="submitorder" type="success">提交订单</el-button></p>
    </el-card>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted, computed } from "vue";
import { Ajax } from "@/api";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";
const router = useRouter();
interface StyleObj {
  //冒红只能先这样了，不影响展示
  good: object;
  value: [string, Number];
}
const cartList: any = ref([]);
const getCart = async () => {
  let res = await Ajax.cartlist();
  console.log(res);

  cartList.value = res.result;
};
const changeflag = async (v: any) => {
  //修改单个商品的选中
  let res = await Ajax.cartupdate({ id: v._id, checked: v.checked });
};
const changevalue = async (v: any) => {
  //修改单个商品的数量
  let res = await Ajax.cartupdate({ id: v._id, value: v.value });
};
const cartdelete = async (l: any, i: number) => {
  let res = await Ajax.cartdelete({ _id: l._id });
  cartList.value.splice(i, 1);
};
const submitorder = () => {
  if (allcount.value == 0) {
    // if(cartList.value.every(item=>!item.checked)){
    ElMessage.error("请至少选中一件商品");
  } else {
    cartList.value
      .filter((item:any) => item.checked)
      .forEach(async (item:object) => {
        let res = await Ajax.billadd(item);
      });
    clearcart();
    router.push({name:'shop-bill'})
  }
};
const clearcart = () => {
  cartList.value
    .filter((item:any) => item.checked)
    .forEach(async (item:any) => {
      let res = await Ajax.cartdelete({ _id: item._id });
    });
};
const quan = computed({
  get() {
    return (
      //cartList是ref数据必须加value
      cartList.value.length > 0 && cartList.value.every((item:any) => item.checked)
    );
  },
  set(v) {
    cartList.value.forEach(async (item:any) => {
      let res = await Ajax.cartupdate({ id: item._id, checked: v });
      item.checked = v; //改完后端改前端。成水帘洞了
    });
  },
});
const allcount = computed(() => {
  return cartList.value
    .filter((item:any) => item.checked)
    .reduce((prev:any, cur:any) => prev + cur.value, 0);
});
const allprice = computed(() => {
  return cartList.value
    .filter((item:any) => item.checked)
    .reduce(
      (prev:any, cur:any) =>
        prev + (cur.value * cur.good.price * cur.good.discount) / 10,
      0
    );
});
onMounted(() => {
  getCart();
});
</script>

<style lang="scss" scoped>
.cart {
  display: flex;
  justify-content: space-between;
  .left {
    width: 800px;
    .box-card {
      width: 100%;
      margin-bottom: 10px;
      .content {
        display: flex;
        align-items: center;
        .center {
          margin-right: 100px;
          p {
            margin-bottom: 10px;
          }
        }
        .el-checkbox {
          margin-right: 100px;
        }

        img {
          width: 200px;
          margin-right: 30px;
        }
      }
    }
  }
  .right {
    width: 500px;
    height: 400px;
    position: fixed;
    top: 130px;
    right: 100px;
    padding: 50px 0 0 100px;
    box-sizing: border-box;
    p {
      margin-bottom: 20px;
    }
  }
}
</style>
